{% extends  'base.html' %}
        
{% block content %}
	
	<h1>{{ collection.name }} </h1>
	<p>Nesta tela é possível selecionar o padrão adequado para resolver um determinado problema.</p>
	
	{% if actions %}
		{% for action in actions %}
			{% ifequal action.id problem_action.id %}
				<div class="float_left mr10 button_selected"><a href="/collections/{{collection_id}}/uidps/select/{{action.id}}">{{action.action}}</a></div>
			{% else %}
				<div class="float_left button mr10"><a href="/collections/{{collection_id}}/uidps/select/{{action.id}}">{{action.action}}</a></div>
			{% endifequal %}
		{% endfor %}
		<div class="clearfloat"></div>
	{% endif %}
	
	{% if objects %}
		{% for object in objects %}
			{% ifequal object.id problem_object.id %}
				<div class="float_left button_selected mr10"><a href="/collections/{{collection_id}}/uidps/select/{{problem_action.id}}/{{object.id}}">{{object.object}}</a></div>
			{% else %}
				<div class="float_left button mr10"><a href="/collections/{{collection_id}}/uidps/select/{{problem_action.id}}/{{object.id}}">{{object.object}}</a></div>
			{% endifequal %}
		{% endfor %}
		<div class="clearfloat"></div>
	{% endif %}
	
	{% if filtered_problems %}
		{% for complement in filtered_problems %}
			{% if uidps %}
				<div class="float_left button_selected mr10">{{complement.complement}}</div>
			{% else %}
				<div class="float_left button mr10">
					<a href="/collections/{{collection_id}}/uidps/select/{{problem_action.id}}/{{problem_object.id}}/{{complement.id}}">{{complement.complement}}</a>
				</div>			
			{% endif %}
		{% endfor %}
		<div class="clearfloat"></div>
	{% endif %}
	
	<div class="boxes float_left ">
		{% for uidp in uidps %}
			{% if forloop.counter|divisibleby:"4" %}
				<ul>
			{% endif %}
				<li>
	            	<!-- img src="/static/images/siteBackground.jpg" alt="{{uidp.name}}"-->
	            	<h2>{{uidp.UIDP.name}}</h2>
	                <a href="/collections/{{collection.id}}/uidps/{{uidp.id}}"><button class='button'>+</button></a>
	            </li>
			{% if forloop.counter|divisibleby:"4" %}
				</ul>
			{% endif %}
		{% endfor %}
		{% if not uidps %}
			<p class="no_item1">Nenhum padrão encontrado.</p>
		{% endif %}
	</div>
		
	<div class="float_left" style="width:800px">
	
	{% if images %}
		<h2>Screenshots</h2>
		<p class="small">All designs are copyright of their respective owners.</p>
		<div id="screenshots" class="center" style="height:450px;">
		
		{% for image in images %}
			<div title="{{image.id}}">
				<a href="{{image.parent_link}}">
					<img src="{{image.image_link}}" target="_blank" alt="{{image.name}}" style="height:450px;" />
				</a>
			</div>												
		{% endfor %}
		</div>
		<p>Os exemplos apresentados acima foram encontrados nas referências abaixo.</p>
		<ul>
			{% for link in references %}
				<li><a href="{{link.parent_link}}" target="_blank">{{link.parent_name}}</a></li>
			{% endfor %}
		</ul>
	
		<script type="text/javascript">		
			$(document).ready(function(){ $('#screenshots').jshowoff({ 
				effect: 'none',
				hoverPause: false,
				controls: true,
				controlText: {
					play: 'Play',
					pause: 'Pause',
					previous: 'Previous',
					next: 'Next'
				}, 
				links: false,
				speed: 3000
			}); });
		</script>
	
	{% endif %}
	</div>
	
{% endblock %}